<template>
	<div>
		<div class="">
			<div class="bgff">
				<ul class="khb-tabs-nav clear fz18 plr20 select" >
					<a class="fl p10 tab-item " :class="personalType=='softText'?'active':''" @click="setPersonal('softText')">软文</a>
					<a class="fl p10 tab-item " :class="personalType=='selfMedia'?'active':''" @click="setPersonal('selfMedia')">自媒体</a>
					<a class="fl p10 tab-item " :class="personalType=='publicNumber'?'active':''" @click="setPersonal('publicNumber')">公众号</a>
					<a class="fl p10 tab-item " :class="personalType=='weibo'?'active':''" @click="setPersonal('weibo')">微博</a>
					<a class="fl p10 tab-item " :class="personalType=='video'?'active':''" @click="setPersonal('video')">视频/直播</a>
					<a class="fl p10 tab-item " :class="personalType=='smallRedBook'?'active':''" @click="setPersonal('smallRedBook')">小红书</a>
				</ul>


				<el-form :model="ruleForm" ref="ruleForm" label-width="" class="">
					<div class="form-search">
						<el-form-item label="" prop="resourceName" style="margin-right: 40px;">
							<el-input v-model="ruleForm.resourceName" placeholder="请输入搜索类容"></el-input>
						</el-form-item>
						<el-select v-model="value" placeholder="全部">
							<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
							</el-option>
						</el-select>
						<el-button type="primary" @click="submitForm('ruleForm')" class="search-btn">确定</el-button>
						
						<el-button type="primary" @click="addSource('add')" class="search-btn">新增</el-button>
					</div>
				</el-form>


				<div id="layfilter" lay-filter="layfilter">
					<table class="filterTable">
						<tbody>
							<tr>
								<td class="item-title">地区:</td>
								<td class="items">
									<ul class="layfilter-ul clear" type="radio" name="district">
										<li value="1" class="layfilter-item"><a>北京市</a></li>
										<li value="790" class="layfilter-item"><a>上海市</a></li>
										<li value="2034" class="layfilter-item"><a>广东省</a></li>
										<li value="2058" class="layfilter-item"><a>深圳市</a></li>
										<li value="2626" class="layfilter-item"><a>重庆市</a></li>
										<li value="217" class="layfilter-item"><a>山西省</a></li>
										<li value="2872" class="layfilter-item"><a>贵州省</a></li>
										<li value="3116" class="layfilter-item"><a>西藏自治区</a></li>
										<li value="346" class="layfilter-item"><a>内蒙古自治区</a></li>
										<li value="3423" class="layfilter-item"><a>青海省</a></li>
										<li value="3316" class="layfilter-item"><a>甘肃省</a></li>
										<li value="3198" class="layfilter-item"><a>陕西省</a></li>
										<li value="2970" class="layfilter-item"><a>云南省</a></li>
										<li value="2667" class="layfilter-item"><a>四川省</a></li>
										<li value="2364" class="layfilter-item"><a>海南省</a></li>
										<li value="1897" class="layfilter-item"><a>湖南省</a></li>
										<li value="1694" class="layfilter-item"><a>湖北省</a></li>
										<li value="1502" class="layfilter-item"><a>河南省</a></li>
										<li value="1348" class="layfilter-item"><a>山东省</a></li>
										<li value="1236" class="layfilter-item"><a>江西省</a></li>
										<li value="1141" class="layfilter-item"><a>福建省</a></li>
										<li value="1019" class="layfilter-item"><a>安徽省</a></li>
										<li value="918" class="layfilter-item"><a>浙江省</a></li>
										<li value="808" class="layfilter-item"><a>江苏省</a></li>
										<li value="647" class="layfilter-item"><a>黑龙江省</a></li>
										<li value="577" class="layfilter-item"><a>吉林省</a></li>
										<li value="462" class="layfilter-item"><a>辽宁省</a></li>
										<li value="37" class="layfilter-item"><a>河北省</a></li>
									</ul>
								</td>
							</tr>
						</tbody>
					</table>
				</div>
 
				<div class="mar-20 mtb20" >
					<el-table v-if="personalType=='softText'||personalType=='selfMedia'" :data="softTextArray" key="softText" border style="width: 100%" :header-cell-style="{
								'background-color': '#f2f2f2',
								'font-size': '16px',
								'font-weight': 'bold',
								'color' : '#66667d'
							}">
						<el-table-column prop="name" label="资源名称" width="150"></el-table-column>
						<el-table-column  label="图片" width="110">
							<template slot-scope="scope">
								<img :src="scope.row.logo" alt="" width="90" height="90">
							</template>
						</el-table-column>
						<el-table-column prop="basicPrice" label="价格（元）" width="120"></el-table-column>
						<el-table-column prop="receiveTimeStr" label="接稿时间" width="120"></el-table-column>
						<el-table-column prop="entranceLevelStr" label="入口级别" width="120"></el-table-column>
						<el-table-column prop="websiteTypesStr" label="网站类型" width="120">
						</el-table-column>
						<el-table-column prop="publishTime" label="平均出稿时间" width="150">
						</el-table-column>
						<el-table-column prop="inclusionReferenceStr" label="收录类型" width="150">
							<!-- <template slot-scope="scope">
								<el-tag :type="scope.row.executionState === '已取消' ? 'danger' : 'success'" close-transition>{{scope.row.executionState}}</el-tag>
							</template> -->
						</el-table-column>
						<el-table-column prop="remarkDesc" label="备注" width="180"></el-table-column>
						<el-table-column fixed="right" label="操作" :width="rightWidth">
						      <!-- <template slot-scope="scope"> -->
								<el-button @click="handleClick(scope.row)" type="button" size="small">预览</el-button>
								<el-button type="button" size="small">编辑</el-button>
								<el-button type="button" size="small">提审核</el-button>
								<el-button type="button" size="small">删除</el-button>
						      <!-- </template> -->
						    </el-table-column>
					</el-table>
					
					<el-table v-if="personalType=='publicNumber'" :data="publicNumberArray" key="publicNumber" border style="width: 100%" :header-cell-style="{
								'background-color': '#f2f2f2',
								'font-size': '16px',
								'font-weight': 'bold',
								'color' : '#66667d'
							}">
						<el-table-column prop="name" label="昵称" width="150"></el-table-column>
						<el-table-column  label="图片" width="150">
							<template slot-scope="scope">
								<img :src="scope.row.userHead" alt="" width="90" height="90" />
							</template>
						</el-table-column>
						<el-table-column  label="二维码" width="150">
							<template slot-scope="scope">
								<img :src="scope.row.qrCode" alt="" width="90" height="90"/>
							</template>
						</el-table-column>
						<el-table-column prop="ygHeadlinePrice" label="硬广头条" width=""></el-table-column>
						<el-table-column prop="rgHeadlinePrice" label="软广头条" width=""></el-table-column>
						<el-table-column prop="rgHeadlinePrice" label="软广头条" width=""></el-table-column>
						<el-table-column prop="ygNextlinePrice" label="硬广次条" width=""></el-table-column>
						<el-table-column prop="fanNum" label="粉丝数" width=""></el-table-column>
						<el-table-column prop="authTypeStr" label="认证类型" width=""></el-table-column>
						<el-table-column prop="readNum" label="阅读数" width=""></el-table-column>
						<el-table-column prop="receiveTimeStr " label="接稿时间" width="150"></el-table-column>
						<el-table-column prop="publishTimeUnit" label="平均出稿时间" width="150"></el-table-column>
						<el-table-column prop="remarkDesc" label="备注" width="180"></el-table-column>
						<el-table-column fixed="right" label="操作" :width="rightWidth">
						      <!-- <template slot-scope="scope"> -->
								<el-button @click="handleClick(scope.row)" type="button" size="small">预览</el-button>
						        <el-button type="button" size="small">编辑</el-button>
						        <el-button type="button" size="small">提审核</el-button>
								<el-button type="button" size="small">删除</el-button>
						      <!-- </template> -->
						</el-table-column>
					</el-table>
					
					<el-table v-if="personalType=='weibo'" :data="weiboArray" key="weibo" border style="width: 100%" :header-cell-style="{
								'background-color': '#f2f2f2',
								'font-size': '16px',
								'font-weight': 'bold',
								'color' : '#66667d'
							}">
						<el-table-column prop="userNick" label="昵称" width="150"></el-table-column>
						<el-table-column  label="头像" width="110">
							<template slot-scope="scope">
								<img :src="scope.row.userHead" alt="" width="90" height="90"/>
							</template>
						</el-table-column>
						<el-table-column prop="ygPrice" label="硬广头条" width="120"></el-table-column>
						<el-table-column prop="rgPrice" label="软广头条" width="120"></el-table-column>
						<el-table-column prop="receiveTimeStr " label="接稿时间" width="150"></el-table-column>
						<el-table-column prop="authTypeStr" label="认证类型" width=""></el-table-column>
						<el-table-column prop="fanNum" label="粉丝数" width=""></el-table-column>
						<el-table-column prop="publishTime" label="平均出稿时间" width="150"></el-table-column>
						<el-table-column prop="introductionDesc" label="备注" width="180"></el-table-column>
						<el-table-column fixed="right" label="操作" :width="rightWidth">
						      <!-- <template slot-scope="scope"> -->
								<el-button @click="handleClick(scope.row)" type="button" size="small">预览</el-button>
						        <el-button type="button" size="small">编辑</el-button>
						        <el-button type="button" size="small">提审核</el-button>
								<el-button type="button" size="small">删除</el-button>
						      <!-- </template> -->
						    </el-table-column>
					</el-table>
					
					<el-table v-if="personalType=='video'" :data="videoArray" key="video" border style="width: 100%" :header-cell-style="{
								'background-color': '#f2f2f2',
								'font-size': '16px',
								'font-weight': 'bold',
								'color' : '#66667d'
							}">
						<el-table-column prop="userNick" label="昵称" width="150"></el-table-column>
						<el-table-column  label="图片" width="150">
							<template slot-scope="scope">
								<img :src="scope.row.userHead" alt="" width="90" height="90"/>
							</template>
						</el-table-column>
						<el-table-column prop="reservationPrice" label="价格" width=""></el-table-column>
						<el-table-column prop="receiveTimeStr " label="接稿时间" width="150"></el-table-column>
						<el-table-column prop="videoPlatformStr" label="平台" width=""></el-table-column>
						<el-table-column prop="fanNum" label="粉丝数" width=""></el-table-column>
						<el-table-column prop="publishTime" label="平均出稿时间" width="150"></el-table-column>
						<el-table-column prop="isOriginStr" label="是否原创" width=""></el-table-column>
						<el-table-column prop="introductionDesc" label="备注" width="180"></el-table-column>
						<el-table-column fixed="right" label="操作" :width="rightWidth">
								<el-button type="button" size="small" @click="handleClick(scope.row)">预览</el-button>
						        <el-button type="button" size="small">编辑</el-button>
						        <el-button type="button" size="small">提审核</el-button>
								<el-button type="button" size="small">删除</el-button>
						    </el-table-column>
					</el-table>
					
					<el-table v-if="personalType=='smallRedBook'" :data="smallRedBookArray" key="smallRedBook" border style="width: 100%" :header-cell-style="{
								'background-color': '#f2f2f2',
								'font-size': '16px',
								'font-weight': 'bold',
								'color' : '#66667d'
							}">
						<el-table-column prop="nick" label="昵称" width="150"></el-table-column>
						<el-table-column  label="头像" width="110">
							<template slot-scope="scope">
								<img :src="scope.row.userHead" alt="" width="90" height="90"/>
							</template>
						</el-table-column>
						<el-table-column prop="vedioPrice" label="图文价格" width="120"></el-table-column>
						<el-table-column prop="notePrice" label="笔记价格" width="120"></el-table-column>
						<el-table-column prop="receiveTimeStr " label="接稿时间" width="120"></el-table-column>
						<el-table-column prop="smallRedBookLevelStr" label="等级" width="120"></el-table-column>
						<el-table-column prop="sexStr" label="性别" width=""></el-table-column>
						<el-table-column prop="publishTime" label="平均出稿时间" width="120"></el-table-column>
						<el-table-column prop="authTypeStr" label="认证类型" width="120"></el-table-column>
						<el-table-column prop="fanNum" label="粉丝数" width="120"></el-table-column>
						<el-table-column prop="likeCollectNum" label="点赞数" width="120"></el-table-column>
						<el-table-column prop="introductionDesc" label="备注" width="180"></el-table-column>
						<el-table-column fixed="right" label="操作" :width="rightWidth">
						      <!-- <template slot-scope="scope"> -->
								  <!--   -->
								<el-button type="button" size="small" @click="handleClick(scope.row)">预览</el-button>
						        <el-button type="button" size="small">编辑</el-button>
						        <el-button type="button" size="small">提审核</el-button>
								<el-button type="button" size="small">删除</el-button>
						      <!-- </template> -->
						</el-table-column>
					</el-table>
					
					<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="ruleForm.page"
					:page-sizes="[10]" layout="prev, pager, next, jumper,total, sizes" :total="ruleForm.size">
					</el-pagination>
				</div>
				
				
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				rightWidth:300,
				personalType: 'softText',
				dialogVisible: false,
				active: 3, // 详请步骤条
				activeName: '全部', //选项卡
				currentPage: 1, //分页插件
				totalCount: 100, //查询后的总条数
				ruleForm: {
					type: 0,
					advertorialOrderExecutionStatus: -1,
					advertorialOrderNo: '',
					advertorialOrderActivityRemark: '',
					resourceName: '',
					startTime: '',
					endTime: '',
					page: 1,
					size: 100
				},
				options: [{
					value: '全部',
					label: '全部'
				}, {
					value: '已上架',
					label: '已上架'
				}, {
					value: '待上架',
					label: '待上架'
				}],
				value: '全部',
				softTextArray:[],
				publicNumberArray :[],
				selfMedia :[],
				weiboArray :[],
				videoArray :[],
				smallRedBookArray:[],
			}
		},
		created() {},
		mounted() {
			let datas = {
				identity:1,
				openCity:'',
				page:this.ruleForm.page
			}
			this.findResourceSoftText(datas);
		},
		methods: {
			//分页
			handleCurrentChange(val) {
				this.ruleForm.page = val;
				this.setPersonal(this.personalType);
			},
			handleSizeChange(val) {
				this.ruleForm.size = val;
			},
			setPersonal(e) {
				let that = this;
				that.personalType = e;
				let datas = {
					identity:1,
					openCity:'',
					page:that.ruleForm.page
				}
				switch(e) {
				    case 'softText':
						that.findResourceSoftText(datas);
				        break;
				    case 'selfMedia':
				        that.findResourceSelfMedia(datas)
				        break;
					case 'publicNumber':
					   that.findResourcePublicNumber(datas);
					   break;
					case 'weibo':
					   that.findResourceWeibo(datas);
					   break;
					case 'video':
					   that.findResourceVedio(datas);
					   break;	
					case 'smallRedBook':
					   that.findSmallRedBook(datas);
					   break;		
				} 
			},
			/* 新增*/
			addSource(add){
				this.routerPush(this.personalType,add);
			},
			routerPush(path,rid){
				this.$router.push({ path:`/resources/${path}/${rid}`});
			},
			//查看
			checkDetails(sourecId){
				let routes = this.$router.resolve({ path: `/sourec/sourec/${sourecId}`});
				window.open(routes.href, '_blank');
				// this.$router.push({path:'/sourec/sourec/${sourecId}'})
			},
			//编辑
			editDetails(perId){
				this.$router.push({ path:`/order/order-place/${perId}`});
			},
			handleClick(tab) {
				console.log(tab.index);
				this.ruleForm.status = tab.index;
				this.search();
			},
			handleGoto(url){
				console.log(url);
				this.$router.push(url);
			},
			submitForm(){},
			exportAll(){},
			search(){
				console.log(this.ruleForm);
			},
			
			handleDetail(b,a){
				// this.$alert("", '订单详情',{dangerouslyUseHTMLString: true});
				this.dialogVisible = true;
			},
			//查找软文
			findResourceSoftText(data){
				let that = this;
				that.$api.req.findResourceSoftText(data)
				.then(res => {
					console.log("软文数据",res.data)
					that.ruleForm.size = res.data.totalCount;
					that.softTextArray = res.data.data;
				})
			},
			//自媒体
			findResourceSelfMedia(data){
				let that = this;
				that.$api.req.findResourceSelfMedia(data)
				.then(res => {
					console.log("自媒体数据",res.data)
					that.ruleForm.size = res.data.totalCount;
					that.softTextArray = res.data.data;
				})
			},
			//查找公众号
			findResourcePublicNumber(data){
				let that = this;
				that.$api.req.findResourcePublicNumber(data)
				.then(res => {
					console.log("公众号数据",res.data);
					that.ruleForm.size = res.data.totalCount;
					that.publicNumberArray = res.data.data;
				})
			},
			//微博
			findResourceWeibo(data){
				let that = this;
				that.$api.req.findResourceWeibo(data)
				.then(res => {
					console.log("微博数据",res.data);
					that.ruleForm.size = res.data.totalCount;
					that.weiboArray = res.data.data;
				})
			},
			//直播视频
			findResourceVedio(data){
				let that = this;
				that.$api.req.findResourceVedio(data)
				.then(res => {
					console.log("直播视频数据",res.data);
					that.ruleForm.size = res.data.totalCount;
					that.videoArray = res.data.data;
				})
			},
			//小红书
			findSmallRedBook(data){
				let that = this;
				that.$api.req.findSmallRedBook(data)
				.then(res => {
					console.log("小红书数据",res.data);
					that.ruleForm.size = res.data.totalCount;
					that.smallRedBookArray = res.data.data;
				})
			},
			
		}
	}
</script>

<style>
	/* @import url("../../static/css/khbicon.css"); */
	/* @import url("../../static/css/layui.css"); */
	/* @import url("../../static/css/reset.css"); */
	/* @import url("../../static/css/home.css"); */
	/* @import url("../../static/css/personal.css"); */
	/* @import url("../../static/css/scrollbar.css"); */
	/* @import url("../../static/layer/layer.css"); */
	@import url("../../static/layer/layfilter.css");

	

	.form-search {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		padding: 20px;
	}
	.search-btn,
	.export-btn {
		width: 77px;
		height: 40px;
		margin-left: 25px;
	}
</style>
